<template>
    <div v-cloak class="datail" oncopy="return true">
        <!-- <div class="placeholder"></div> -->

        <div class="content">
            <div v-if="drawer" class="tip_box">
                <i class="el-icon-close closeWIN" @click="drawer=false"></i>
                <div class="infoTip_box">
                    <p>{{this.network_endData.next_name}}标的即将开始竞拍，是否开始切换？</p>
                    <div>
                        <span>距离下场标的开拍还有：</span>
                        <span>{{ssNext}}秒</span>
                    </div>
                    <div class="btn_box">
                        <el-button type="info" plain size="small" class="left_btn" @click="drawer=false">暂不切换</el-button>
                        <el-button type="danger" plain size="small" @click="nextMark">立即切换</el-button>
                    </div>
                </div>
            </div>
            <div class="warp box">
                <auctionList
                :auction-data="auctionObj"
                :searchPic="searchPic"
                @lotsAllData="lotsAllData"
                />

                <div class="mid_line"></div>

                <div class="con">
                    <div class="chatPic">
                        <h4><span v-if="lotsObj.bidmode == '2'" class="red">【降价拍】</span>{{lotsObj.name}}</h4>
                        <div class="pic_time">
                            <div class="pic">
                                <div class="pic-box">
                                    <video v-if="imagesItem.only == '2'" style="width: 420px; height: 285px" controls :src="imgurls+imagesItem.url"></video>
                                    <div class="img_b" v-else>
                                        <img  :src="imgurls+imagesItem.url"/>
                                        <!-- 鼠标层罩 -->
                                        <div v-show="topShow" class="top" :style="topStyle"></div>
                                        <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
                                        <div class="maskTop" @mouseenter="enterHandler" @mousemove="moveHandler" @mouseout="outHandler"></div>
                                    </div>
                                    
                                </div>
                            
                            
                                <div class="pic_list">
                                    <i @click="go(1)" class="el-icon-arrow-left left_btn"></i>
                                    <div class="pic_con">
                                        <ul class="pic_ul" :style="changePic">
                                            <li v-for="(val,i) in imagesArylots" :key="i" @click="imageShow(i)"> 
                                                <div class="img_box">
                                                    <img v-if="val.only == '1'" :src="imgurls+val.url"/>
                                                    <video v-else autoplay="false" :src="imgurls+val.url"></video>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <i @click="go(-1)" class="el-icon-arrow-right right_btn"></i>
                                </div>
                                <div class="starOnlooker">
                                    <p @click="attentionStar(lotsObj.id)" class="right">
                                        <i class="el-icon-star-on" :class="[lotsObj.is_follow == 1? 'red' : '']" style="font-size:16px" ></i>
                                        <span>关注</span>
                                    </p>
                                    <p>{{lotsObj.viewcount}}次围观</p>
                                </div>
                            </div>
                            <div class="time_money">
                                <div v-show="rShow" class="right">
                                    <img :style="r_img" class="rightImg" :src="imgurls+imagesItem.url" alt="">
                                </div>



                                <div class="enter_for">
                                    <!-- 倒计时区域 -->
                                     <!-- <div v-if="lotsObj.bidmode =='1'"> -->
                                        <div v-if="lotsObj.state=='1'||lotsObj.state=='0'" class="count_down">
                                            <span class="J_underway greenBtn">即将开始</span>
                                            <span v-if="lotsObj.is_entry==1" class="state_tit">拍卖会预计：{{auctionStartTime}}开始</span>
                                            <span v-else>拍卖会预计{{auctionStartTime}}开始</span>
                                        </div>
                                        <div v-else-if="lotsObj.state=='2'" class="count_down">
                                            <span class="J_underway redBtn">正在进行</span>
                                            <span class="J_TimeTitle">
                                                <span v-if="nowFree_dd==true">限时竞价倒计时</span>
                                                <span v-else>自由竞价倒计时</span>
                                            </span>
                                            
                                            <span class="J_TimeLeft">
                                                <!-- <span class="big_word">{{lotsObj.state=='6'?lotsObj.now_days:ddCountDown}}</span> -->
                                                <span class="big_word">{{ddCountDown}}</span>
                                                <span class="small_word">天</span>
                                                <span class="big_word">{{hhCountDown}}</span>
                                                <span class="small_word">时</span>
                                                <span class="big_word">{{mmCountDown}}</span>
                                                <span class="small_word">分</span>
                                                <span class="big_word">{{ssCountDown}}</span>    
                                                <span class="small_word">秒</span>
                                            </span>
                                        </div>
                                        <!-- lotsObj.state=='3'||lotsObj.state=='4'||lotsObj.state=='5' -->
                                        <div v-else class="count_down">
                                            <span v-if="lotsObj.state=='3'" class="J_underway redBtn">已成交</span>
                                            <span v-if="lotsObj.state=='4'" class="J_underway grayBtn">已流拍</span>
                                            <span v-if="lotsObj.state=='5'" class="J_underway grayBtn">已撤拍</span>
                                            <span v-if="lotsObj.state=='6'" class="J_underway yellowBtn">已暂停</span>
                                            <span v-if="lotsObj.state=='7'" class="J_underway yellowBtn">等待拍卖师操作</span>
                                            <span>
                                                <span v-if="lotsObj.state=='6'">{{lotsObj.suspend_time_show}}暂停</span>
                                                <span v-else>{{lotsObj.end_time}}结束</span>
                                            </span>
                                        </div>
                                     <!-- </div> -->
                                    <!--- 出价区域 -->
                                    <!-- 1 -->
                                    <div v-if="lotsObj.state=='1'||lotsObj.state=='2'||lotsObj.state=='6'||lotsObj.state=='7'||lotsObj.state=='0'" class="enter_forMoney" :style="{background:(lotsObj.state=='1'?'#F0FBF9':'#FDF4F5')}">
                                        <div v-if="lotsObj.is_entry==1||lotsObj.is_entry==0">
                                            <div class="en_for_money">
                                                <span class="m_current" v-if="lotsObj.state=='1'||lotsObj.state=='0'">起拍价</span>
                                                <span class="m_current" v-if="lotsObj.state=='2'||lotsObj.state=='6'||lotsObj.state=='7'">当前价</span>
                                                <span class="m_price green" v-if="lotsObj.state=='1'||lotsObj.state=='0'">
                                                    {{lotsObj.startprice}}元
                                                    <span class="m_rmb" v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                                </span>
                                                <span class="m_price red" v-if="lotsObj.state=='2'||lotsObj.state=='6'||lotsObj.state=='7'">
                                                    {{lotsObj.top_price}}元
                                                    <span class="m_rmb" v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                                </span>
                                                
                                            </div>
                                            
                                            <div class="en_for_bm">
                                                <p class="en_for_btn redBtn" @click="enterFor(auctionObj.id,lotsObj.id,lotsObj.is_entry)">报名</p>
                                            </div>
                                        </div>
                                        <div v-if="lotsObj.is_entry==2" class="signSubmit">
                                            <div class="en_for_money">
                                                <span class="m_current" v-if="lotsObj.state=='1'">起拍价</span>
                                                <span class="m_current" v-if="lotsObj.state=='2'||lotsObj.state=='6'||lotsObj.state=='7'">当前价</span>
                                                <span class="m_price green" v-if="lotsObj.state=='1'">
                                                    {{lotsObj.startprice}}元
                                                    <span class="m_rmb" v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                                </span>
                                                <span class="m_price red" v-if="lotsObj.state=='2'||lotsObj.state=='6'||lotsObj.state=='7'">
                                                    {{lotsObj.top_price}}元
                                                    <span class="m_rmb" v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                                </span>
                                                
                                            </div>
                                            <div class="tipSign">您的报名信息已提交,请联系拍卖企业缴纳保证金！</div>
                                            <div class="ophoneSign">联系电话：15176832707</div>
                                        </div>
                                        <!-- <div v-if="lotsObj.is_entry==3&&lotsObj.state=='1'">
                                            <div class="en_for_money">
                                                <span class="m_current" v-if="lotsObj.state=='1'">起拍价</span>
                                                <span class="m_current" v-if="lotsObj.state=='2'||lotsObj.state=='6'||lotsObj.state=='7'">当前价</span>
                                                <span class="m_price green" v-if="lotsObj.state=='1'">
                                                    {{lotsObj.startprice}}元
                                                    <span class="m_rmb" v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                                </span>
                                                <span class="m_price red" v-if="lotsObj.state=='2'||lotsObj.state=='6'||lotsObj.state=='7'">
                                                    {{lotsObj.top_price}}元
                                                    <span class="m_rmb" v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                                </span>
                                               
                                            </div>
                                            <div class="en_f_add">
                                                <el-input-number 
                                                v-model="money" 
                                                :precision="2" 
                                                :step="lotsObj.rateladder" 
                                                :step-strictly="true"
                                                :min="lotsObj.top_price" 
                                                :disabled="true"
                                                @change="moneyChange" 
                                                label="描述文字"></el-input-number>
                                            </div>
                                        </div> -->
                                        <!-- 用来加价的计步器 -->
                                        <div v-if="lotsObj.bidmode == '1'">
                                            <div v-if="lotsObj.is_entry==3&&lotsObj.state=='1'">
                                                <div class="en_for_money">
                                                    <span class="m_current" v-if="lotsObj.state=='1'">起拍价</span>
                                                    <span class="m_current" v-if="lotsObj.state=='2'||lotsObj.state=='6'||lotsObj.state=='7'">当前价</span>
                                                    <span class="m_price green" v-if="lotsObj.state=='1'">
                                                        {{lotsObj.startprice}}元
                                                        <span class="m_rmb" v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                                    </span>
                                                    <span class="m_price red" v-if="lotsObj.state=='2'||lotsObj.state=='6'||lotsObj.state=='7'">
                                                        {{lotsObj.top_price}}元
                                                        <span class="m_rmb" v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                                    </span>
                                                
                                                </div>
                                                <div class="en_f_add">
                                                    <el-input-number 
                                                    v-model="money" 
                                                    :precision="2" 
                                                    :step="lotsObj.rateladder" 
                                                    :step-strictly="true"
                                                    :min="lotsObj.top_price" 
                                                    :disabled="true"
                                                    @change="moneyChange" 
                                                    label="描述文字"></el-input-number>
                                                </div>
                                            </div>
                                            <div v-if="lotsObj.is_entry==3&&lotsObj.state=='2'||lotsObj.is_entry==3&&lotsObj.state=='6'||lotsObj.is_entry==3&&lotsObj.state=='7'">
                                            
                                                <div class="en_for_money" v-if="lotsObj.is_entry==3">
                                                    <span class="m_current">当前价</span>
                                                    <span class="m_price red">{{lotsObj.top_price}}元</span>
                                                    <span class="m_rmb red" v-if="lotsObj.unit">/{{lotsObj.unit}}
                                                        <zn-Hint v-if="lotsObj.is_leading==1&&lotsObj.state=='2'" />
                                                        <green-Hint v-if="lotsObj.is_leading==2&&lotsObj.state=='2'" />
                                                    </span>
                                                    
                                                </div>
                                                <div v-if="lotsObj.state=='7' && ddCountDown==0&&hhCountDown==0&&mmCountDown==0&&ssCountDown==0" class="en_f_waiting">
                                                    <p >等待拍卖师操作</p>
                                                </div>
                                                <div v-else>
                                                    <div class="en_f_add">
                                                        <el-input-number 
                                                        v-model="money" 
                                                        :precision="2" 
                                                        :step="lotsObj.rateladder" 
                                                        :step-strictly="true"
                                                        :min="lotsObj.top_price" 
                                                        :disabled="lotsObj.state=='6'?true:false"
                                                        @change="moneyChange" 
                                                        label="描述文字"></el-input-number>
                                                    </div>
                                                    <div class="en_f_payBtn">
                                                        <el-button type="danger" :disabled="lotsObj.state=='6'?true:false" @click="outLotsOfferBtn">{{lotsObj.state=='2'?'出 价':'暂停出价'}}</el-button>
                                                    </div>
                                                </div>    
                                            </div>
                                        </div>
                                        <!--降价拍区域  -->
                                        <div v-if="lotsObj.bidmode == '2'">
                                            <div v-if="lotsObj.is_entry==3&&lotsObj.state=='1'">
                                                <div class="en_for_money">
                                                    <span class="m_current" v-if="lotsObj.state=='1'">当前价</span>
                                                    <span class="m_current" v-if="lotsObj.state=='2'||lotsObj.state=='6'||lotsObj.state=='7'">当前价</span>
                                                    <span class="m_price green" v-if="lotsObj.state=='1'">
                                                        {{lotsObj.startprice}}元
                                                        <span class="m_rmb" v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                                    </span>
                                                    <span class="m_price red" v-if="lotsObj.state=='2'||lotsObj.state=='6'||lotsObj.state=='7'">
                                                        {{lotsObj.top_price}}元
                                                        <span class="m_rmb" v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div v-if="lotsObj.is_entry==3&&lotsObj.state=='2'||lotsObj.is_entry==3&&lotsObj.state=='6'||lotsObj.is_entry==3&&lotsObj.state=='7'">
                                            
                                                <div class="en_for_money" v-if="lotsObj.is_entry==3">
                                                    <span class="m_current">当前价</span>
                                                    <span class="m_price red">{{lotsObj.top_price}}元</span>
                                                    <span class="m_rmb red" v-if="lotsObj.unit">/{{lotsObj.unit}}
                                                        <zn-Hint v-if="lotsObj.is_leading==1&&lotsObj.state=='2'" />
                                                        <green-Hint v-if="lotsObj.is_leading==2&&lotsObj.state=='2'" />
                                                    </span>
                                                    
                                                </div>
                                                <div v-if="lotsObj.state=='7' && ddCountDown==0&&hhCountDown==0&&mmCountDown==0&&ssCountDown==0" class="en_f_waiting">
                                                    <p >等待拍卖师操作</p>
                                                </div>
                                                <div v-else>
                                                    <div class="en_f_add">
                                                        <!-- <el-input-number 
                                                        v-model="money" 
                                                        :precision="2" 
                                                        :step="lotsObj.rateladder" 
                                                        :step-strictly="true"
                                                        :min="lotsObj.top_price" 
                                                        :disabled="lotsObj.state=='6'?true:false"
                                                        @change="moneyChange" 
                                                        label="描述文字"></el-input-number> -->
                                                        <span>{{ lotsObj.top_price }}</span>
                                                    </div>
                                                    <div class="en_f_payBtn">
                                                        <el-button type="danger" :disabled="lotsObj.state=='6'?true:false" @click="outLotsOfferBtn">{{lotsObj.state=='2'?'出 价':'一次性出价'}}</el-button>
                                                    </div>
                                                </div>    
                                            </div>
                                        </div>
                                        <!-- 减价拍区域 -->

                                        <!-- 一次性拍区域 -->

                                    </div>
                                    <!-- 3 4 5 -->
                                    <div v-else class="enter_forMoney bgc_gray">
                                        <div v-if="lotsObj.state=='3'" class="sealImprint">
                                            <div class="en_for_money">
                                                <span class="m_current">成交价：</span>
                                                <span class="m_price red">{{lotsObj.bidprice}}元</span>
                                                <span class="m_rmb red" v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                            </div>
                                            <div class="en_for_bm">
                                                <p class="en_for_btn redBtn">已成交</p>
                                            </div>
                                            <img class="imgSuc" src="@/assets/successbdiocn.png" alt="">
                                        </div>
                                        <!-- 4流拍 5撤拍 -->
                                        <div v-if="lotsObj.state=='4'||lotsObj.state=='5'">
                                            <div class="en_for_bm">
                                                <p class="abortiveAuction">{{lotsObj.state=='4'?'已流拍':'已撤拍'}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!----------------->
                                    <ul class="enter_ul" v-if="lotsObj.hascommission=='1'">
                                        <li>
                                            <i class="el-icon-warning"></i>
                                            <span>成交后，需向盟拍网另付0.15%的软件使用费</span> 
                                        </li>
                                        <li>
                                            <i class="el-icon-warning"></i>
                                            <span v-if="lotsObj.commissiontype=='1'">成交后，需向拍卖企业另付{{lotsObj.fixrate}}%佣金</span>
                                            <span v-else-if="lotsObj.commissiontype=='2'">成交后，需向拍卖企业另付{{lotsObj.fixamount}}元的佣金</span>
                                            <span v-else>成交后，需向拍卖企业另付拍卖佣金，具体规则请联系拍卖企业</span>
                                        </li>
                                        
                                    </ul>
                                </div>
                                <div class="bidderNumber_box" v-if="lotsObj.state=='2'&&lotsObj.is_entry==3||lotsObj.state=='6'&&lotsObj.is_entry==3||lotsObj.state=='1'&&lotsObj.is_entry==3">
                                    <span>您的竞买号：</span>
                                    <span class="bid_num_color">{{lotsObj.bidnum}}</span>
                                    <span>（{{now_user_offercount}}次出价）</span>
                                </div>
                                <div  class="form_con">
                                    <el-row>
                                        <el-col :span="6">
                                            <span>起拍价：</span>
                                            <span>{{lotsObj.startprice}}元</span><span v-if="lotsObj.unit">/{{lotsObj.unit}}</span>
                                        </el-col>
                                        <el-col :span="6">
                                            <span>保证金：</span>
                                            <span>{{lotsObj.bond}}元</span>
                                        </el-col>
                             
                                            <el-col v-if="lotsObj.bidmode=='1'" :span="6">
                                                <span>加价幅度：</span>
                                                <span>{{lotsObj.rateladder}}元</span>
                                            </el-col>
                                            <el-col v-if="lotsObj.bidmode=='2'" :span="6">
                                                <span>降价幅度：</span>
                                                <span style="color: #d13a29;">{{lotsObj.rateladder}}元</span>
                                            </el-col> 
                                        <el-col :span="6">
                                            <span>评估价：</span>
                                            <span>
                                                {{lotsObj.assessprice}}
                                                <span v-if="typeof lotsObj.assessprice === 'number'">元</span>
                                            </span>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="6">
                                            <span>保留价:</span>
                                            <span>{{lotsObj.minprice}}</span>
                                        </el-col>
                                        <el-col :span="6">
                                            <span>优先购买权人：</span>
                                            <span>{{lotsObj.preemption}}</span>
                                        </el-col>
                                        <el-col :span="6">
                                            <span>拍卖形式：</span>
                                            <span>{{lotsObj.bidmode == '1'? '加价拍':'降价拍'}}</span>
                                            <el-tooltip v-if="lotsObj.bidmode == '2'" placement="top">
                                                 <div slot="content">拍卖标的竞价由高到低依次递减，直到第<br/>一个竞买人应价时成交的一种拍卖方式。</div>
                                            <i class="el-icon-question"></i>
                                            </el-tooltip>
                                        </el-col>
                                        
                                    </el-row>
                                     <el-row>
                                        <el-col :span="8">
                                            <span> 成交价是否含税：</span>
                                            <span v-if="lotsObj.is_tax ==='1'">含税</span>
                                            <span v-if="lotsObj.is_tax === '0'">不含税</span>
                                        </el-col>
                                        
                                        <el-col v-if="lotsObj.is_tax === '1'" :span="8">
                                            <span> 税率：</span>
                                            <span>{{lotsObj.tax_rate}}%</span>
                                        </el-col>
                                         <el-col v-if="lotsObj.is_tax === '1'" :span="8">
                                            <span> 发票类型：</span>
                                            <span v-if="lotsObj.invoice_type===1">增值税普通发票</span>
                                            <span v-else-if="lotsObj.invoice_type===2">增值税专用发票</span>
                                        </el-col>
                                    </el-row>
                                    <el-row v-if="lotsObj.bidmode == '2'">
                                        <el-col :span="12">
                                            <span>降价周期：</span>
                                            <span>{{tremTime}}</span>
                                        </el-col>
                                    </el-row>
                                    <el-row v-if="lotsObj.bidmode=='1'">
                                        <el-col :span="12">
                                            <span>自由竞价时间：</span>
                                            <span>{{freedomTime}}</span>
                                        </el-col>
                                        <el-col :span="12">
                                            <span> 限时竞价时间：</span>
                                            <span>{{tremTime}}</span>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="8">
                                            <span> 报名限制：</span>
                                            <span v-if="lotsObj.applicantstype=='0'">不限</span>
                                            <span v-if="lotsObj.applicantstype=='1'">仅限个人报名</span>
                                            <span v-if="lotsObj.applicantstype=='2'">仅限机构报名</span>
                                        </el-col>
                                        <el-col :span="12" v-if="lotsObj.amount">
                                            <span> 标的数量：</span>
                                            <span>{{lotsObj.amount}}</span>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <span> 所在地：</span>
                                            <span>{{lotsObj.position}}</span>
                                        </el-col>
                                        
                                    </el-row>
                                   
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="chat">
                        <el-tabs type="border-card" :stretch="true">
                            <el-tab-pane label="拍卖师发言">
                                <div class="mianscroll" ref='mianscroll' >
                                    <div v-if="list.length>0">
                                        <div class="msg_box" ref="msgbox" v-for="(item,index) in list" :key="index">
                                            <div class="c_header">
                                                <span v-if="item.type=='1'" class="c_header_tb red">系统消息</span>
                                                <span v-if="item.type=='2'" class="c_header_tb">拍卖会</span>
                                                <span v-if="item.type=='3'" class="c_header_tb green">当前标的</span>
                                                <el-divider direction="vertical"></el-divider>
                                                <span class="c_header_tm gray">{{item.show_time}}</span>
                                            </div>
                                            <p class="c_news">{{item.content}}</p>
                                        </div>
                                        
                                    </div>
                                    <div class="emptyData" v-else>暂无拍卖师发言</div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="拍卖师信息">
                                <div class="infoChat">
                                    <el-image style="width: 100px; height: 100px" :src="imgurls+auctioneerImg"></el-image>
                                    <p>{{auctioneerObj.name}}</p>
                                    <p>拍卖师：{{auctioneerObj.card_num}}</p>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                        <div class="de_table">
                            <el-table
                            :header-cell-style="{background:'#f6f3f4'}"
                                :data="tableData"
                                :row-class-name="firstRowStyle"
                                style="width: 100%;height:100%">
                                <el-table-column prop="stateOnly" label="状态" width="60">
                                    <template slot-scope="scope">
                                        <div class="red" v-if="scope.row.state == '2'">撤销</div>
                                        <div class="red" v-if="scope.row.state == '1'&&scope.row.is_first == 1">{{lotsObj.state=='3'?'成交':'领先'}}</div>
                                        <div v-if="scope.row.state == '1'&&scope.row.is_first == 0">出局</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="bidnum" label="竞买号" width="70"></el-table-column>
                                <el-table-column prop="price" label="出价" width="152"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>


                <div class="mid_line"></div>


                <div class="module_list">
                    <el-tabs type="border-card" :stretch="true">
                        <el-tab-pane label="重要提示">
                            <p class="big_text" v-html="lotsObj.important"></p>
                        </el-tab-pane>
                        <el-tab-pane label="竞买公告">
                            <p v-if="lotsObj.identity==='0'"  class="big_text" v-html="lotsObj.announcement"></p>
                             <div v-if="lotsObj.identity==='1'">
                                <h3 style="text-align: center;">竞买公告</h3>
                                <p class="textindent">应委托方的要求，河北一盟拍卖有限公司定于<span class="underlined">{{this.dataTime}}</span>时在河北一盟拍卖有限公司的“盟拍网”在线竞价系统对<span class="underlined">{{lotsObj.name}}</span>物资进行公开竞价处置（不接受现场竞拍）。联系电话：<span class="underlined">{{ auctionObj.entry_phone }}</span></p>
                                <h3 class="textindent">一、报名环节</h3>
                                <p class="textindent"><span class="underlined">{{lotsObj.lookdetailtime}}</span> 时起在标的物所在地进行为期不低于两天的预展。有意竞买者请缴纳报名费、竞买保证金并携带有效证件(报名公司由非法定代表人办理报名及参与竞拍任何程序的，应当出具加盖公司公章及法定代表人签字或签章的授权书)。办理竞买手续，银行转账以实际到账为准。竞买人及或付款人自愿同意：报名费一经缴纳，即获得本次竞价资格及盟拍网匹配的参拍身份，拍卖方已为此产生成本支出，且为防止恶意报名围拍、串拍，故其后无论报名人是否参与预展看货、出价等环节，均无权主张报名费的退还；如报名费是采取微信、支付宝等便捷方式支付的，付款人应在支付界面的备注栏中填写竞买人的名称，付款人的报名费支付即视为竞买人的报名费支付，否则，付款人、竞买人自行承担未备注竞买人名称的全部法律责任和后果。保证金缴纳：汇款账户（单位名称：河北一盟拍卖有限公司，账户：170 473 149，开户行：中国民生银行石家庄西二环北路支行）公司地址：河北省石家庄市新华区华强广场A座7楼</p>

                                <h3 class="textindent">二、预展看货</h3>
                                <h4 class="textindent">1、预展方式</h4>
                                <p class="textindent">竞买标的物预展同时采取网络直播看货和线下现场看货的方式进行，看货过程中，看货者就具体关注问题，可要求重点展示释明或在指定时间到现场看货，否则视同全部认可所展示货物。网络直播看货与线下现场看货出现不一致的情况时，以线下现场看货的情况为准。
                                若因疫情或者竞买标的特性等原因，仅采取网络直播看货的方式，则网络直播看货与线下现场看货具有同等法律效力。看货人网络直播看货完毕，即视为认可标的货物的现状，竞买完成后，不得再以标的瑕疵为由主张任何权利。
                                看货者应谨慎细致行使自身看货权利，中途离开过现场或直播间、放弃要求重点释明权利等情形，出现不利后果均自行承担。看货结束即视为看货人已成功完成了验货流程，看货人已对竞买标的物查验完毕，对竞买标的物的规格型号、质量、瑕疵、数量，以及与招商参考图片匹配度等全部信息无任何异议。
                                若仅采取线下现场看货的方式，应遵守《网络竞价规则》中现场看货的约定。</p>
                                <h4 class="textindent">2、注意事项</h4>
                                <p class="textindent">竞买人在预展看货期间，应当着重向委托拍卖方看货讲解人员了解如下事宜：签订合同、预付货款的账号、流程等要求；成交后货物清运期限、方式、限制等具体要求；到达看货、拉货现场路况，拉货完毕是否需要清扫现场等全部细节。拍卖成交后不得再以不能在规定期限内或规定方式清运货物等任何理由拒签合同、拒付货款。</p>
                                <h3 class="textindent">竞价成交后，买受人应按照要求与委托方签订买卖合同，因故未与委托方签订合同的，保证金不予返还。</h3>如竞买人或买受人违约，河北一盟拍卖有限公司扣除或应委托方的要求代扣买受人已缴纳的保证金作为违约金时，依据《中华人民共和国发票管理办法》《中华人民共和国发票管理办法实施细则》的规定，河北一盟拍卖有限公司收取的违约金由河北一盟拍卖有限公司负责开具票据，河北一盟拍卖有限公司代扣代付给委托方的违约金由委托方负责开具票据。  
                             </div>
                           
                        </el-tab-pane>
                        <el-tab-pane label="竞买须知">
                            <p v-if="lotsObj.identity==='0'" class="big_text" v-html="lotsObj.instructions"></p>
                            <!-- <bidInstruction /> -->
                             <div v-if="lotsObj.identity==='1'">
                                <h3 style="text-align: center;">（竞买须知包括《重要通知》和《网络竞价规则》）</h3>
                                <h3 style="text-align: center;">重要通知</h3>
                                <p class="textindent textfont" >一、竞买人缴纳竞买保证金人民币<span class="underlined">{{lotsObj.bond}}</span>元（大写: <span class="underlined">{{ this.numberCapital }}</span>整）后可参与本次竞买。</p>
                                <p class="textindent">二、本次成交价为<span v-if="lotsObj.is_tax ==='1'">含税自提价 （税率<span class="underlined">{{lotsObj.tax_rate}}</span> %）。含发票，发票类型为：<span class="underlined">{{lotsObj.invoice_type===1? '增值税普通发票': lotsObj.invoice_type===2?'增值税专用发票':'无'}} </span>。</span><span v-if="lotsObj.is_tax ==='0'">不含税成交价</span> </p>
                                <p class="textindent">三、买受人开始进场拉货后，于委托方规定的时间内或在买受人看货时自行与委托方确认的拉货期限内，通过双方约定的方式将标的物全部清运完毕。现场拉货过程中产生的所有费用均有买受人自行承担，委托方、河北一盟拍卖有限公司不提供车辆及人工辅助。标的物上附着的水泥或其他杂质，买受人在装车过磅前全部自行清理完毕，过磅时不予扣杂。标的物清运完毕后两日内，买受人负责自费将现场垃圾、拉货产生的垃圾全部清运完毕。
                                竞买人违反上述约定的，委托方、河北一盟拍卖有限公司有权扣除保证金，并追究违约责任。</p>
                                <p class="textindent">四、报名参加竞买的资格条件:<span class="underlined">{{ lotsObj.applicantstype === '0'? '不限资质':'企业资质'}}</span></p>
                                <h4  class="textindent">不允许关联企业或相关联人员同时报名参加竞标，一经查清按照违约处理。</h4>
                                <p class="textindent">五、该标的采用报名人数未满 <span class="underlined">{{lotsObj.required_min_regist_num}}</span>家 时，委托方有权利选择此次标的流拍。</p>
                                <p class="textindent">六、佣金收取的条件及标准。在盟拍网竞价页面展示“已成交”字样并生成成交确认书，视同“拍卖师落槌或者以其他公开表示买定的方式确认”，此时竞价拍卖成交，佣金数额确定后应当立即支付，支付标准如下：</p>
                                <h4  class="textindent">1、按照比例计收佣金</h4>
                                <p  class="textindent">竞价成交后，买受人履约完毕，本次成交价为含票自提价的，买受人应按照委托方向其开具发票的票面价税合计总金额<span v-if="lotsObj.commissiontype ==='1'" class="underlined">{{lotsObj.fixrate}}%</span><span v-if="lotsObj.commissiontype ==='2'" class="underlined">{{lotsObj.fixamount}}元</span>的标准，向河北一盟拍卖有限公司支付服务佣金；本次成交价为不含票价（部分特殊物品不能开具发票）的，或者因故未能开具发票的，买受人应按照标的物实际成交金额为基数，依照前述比例的标准向河北一盟拍卖有限公司支付服务佣金。</p>
                                <p class="textindent"><span style="font-weight: 600;">特殊约定：</span>1、起拍价不等同保留价；此次拍卖设有保留价，超过保留价价高者得，不超过则流拍。</p>
                                <p class="textindent">2、凡参加拍卖会的竞买人皆视为知悉本规则告知的所有内容，自愿接受本规则约束，同意按本规则解决可能存在的争议。</p>
                                <p class="textindent">3、竞买人须按自己的需求对拍卖标的物、本规则及其他拍卖资料进行充分了解、查看、咨询，对其有异议，应在参加拍卖会前提出。对成功申请并缴纳保证金的参加本次网络竞拍的竞买人，视其为无异议，且认可该标的起拍价，并自愿承担相应责任。</p>
                                <p class="textindent">4、本规则所指竞买保证金、成交价款、佣金均须以人民币方式支付。</p>
                                <p class="textindent">5、若拍卖标的中止、撤回或竞买未成交，拍卖人和委托人不承担竞买人包括保证金利息、预期收益等任何经济损失的赔偿责任。</p>
                                <p class="textindent">6、为了规范买卖秩序，特对废旧物资处理规定如下：凡与委托方合作，购买委托方各类废旧物资的单位，应遵守国家法律及委托方的各项管理制度，如有为了谋取非法利益采取在计量器具上安装控制元件遥控计量器具等等一切不正当手段窃取委托方物资的，委托方对采购单位做如下处理：</p>
                                <p class="textindent">（1）终止现执行的合同并终身取消后期合作；</p>
                                <p class="textindent">（2）依法追回被窃取的物资或按被窃取物资的原值进行索赔，扣除该公司竞买保证金及货款并处以<span class="underlined">{{lotsObj.damage}}</span>万元以上的罚款；</p>
                                <p class="textindent">（3）对性质特别恶劣的，数额巨大，将依法对采购单位或个人追究其法律责任。</p>
                                <p class="textindent">（4）该批废旧物资由买受方自提，在自提过程中所发生一切安全责任和损失均由买受方自行承担，委托方不承担任何责任和损失。</p>

                                <p class="textindent">1、 经河北一盟拍卖有限公司主持竞价成交后（特殊情形下采用最高价审批招标竞价模式中，经委托方核实确认成交后），买受人未按照《竞买公告》《竞买须知》“招商告知说明”等本次竞价要求，或者未按照其与委托方的约定履行相关义务的，买受人应按照标的物预处置数量等所对应佣金的收费标准，向河北一盟拍卖有限公司支付服务佣金。</p>
                                <p class="textindent">2、 河北一盟拍卖有限公司通过函件催收服务佣金的，买受人自收到或者视为收到函件后3日内将服务佣金转入指定账户，逾期支付视为买受人借款，以未付服务佣金为基数，按照一年期LPR（贷款市场报价利率）的4倍计付利息；通过诉讼方式主张服务佣金的，自法院受案日开始，以服务佣金为基数，按照一年期LPR（贷款市场报价利率）的4倍计付利息，且由此产生的包含但不限于诉讼费、保全费、鉴定费、差旅费、律师费等一切为主张权利所产生的费用，均由买受人承担。</p>
                                <p  class="textindent">七、严禁以任何手段谋取非法利益。在拉货过程中，严禁在计量器具上安装控制元件、遥控计量器具，严禁以其他一切手段窃取委托方的财产。一经发现，河北一盟拍卖有限公司或委托方有权将买受人所缴纳的保证金、预付款予以扣除，并可在弥补损失完毕的基础上，要求其承担不低于五万元的违约赔偿责任。
                                委托方和河北一盟拍卖有限公司还将依法追究窃取方的行政责任、民事责任或刑事责任。</p>
                                <p  class="textindent">八、买定成交（中标）后，买受人应于<span class="underlined">{{this.towDataTime}}</span>前，自行向委托方索要收款账号，并将标的物预处置货款转入该指定账号中，同时签订《废旧物资销售合同》。</p>
                                <p  class="textindent">九、委托方和河北一盟拍卖有限公司不对标的物做任何担保、保证、承诺，具体处置物资以委托方的实际指定为准，按委托方的要求进行处置、清理、运输。</p>
                                <p  class="textindent">十、其他特殊事项<span class="underlined"> {{ lotsObj.special_matter }}</span></p>
                                <h2 style="text-align: center;">网 络 竞 价 规 则</h2>
                                <p  class="textindent">一、为规范网络拍卖行为，根据《中华人民共和国拍卖法》及有关法律、法规特制定本《网络拍卖规则》。</p>
                                <p class="textindent">二、参与网络竞价的竞买人须是具有完全民事行为能力的自然人、法人以及其他组织，并具备操作计算机的能力。拍卖人声明不提供统一的竞价场所和竞价工具。</p>
                                <p class="textindent">三、参加竞买人员凭法人证照办理竞买手续、交付保证金，获得竞买账号，取得竞买资格。没有竞买账号参与竞买者报价无效。</p>
                                <p class="textindent">四、竞买人之间不得恶意串通，操纵竞投，违者依《中华人民共和国拍卖法》承担法律责任。</p>
                                <p class="textindent">五、按照《中华人民共和国拍卖法》有关规定及“依物品现状进行拍卖” 的国际惯例，拍卖人已在拍卖会前对拍卖标的进行了超过两天的预展，并声明不承担瑕疵担保责任。竞买人应在拍卖预展期间认真查看了解拍卖标的，仔细阅读本《网络拍卖规则》。竞买人一旦参加竞投，即表示接受拍卖标的之一切现状和本规则之全部条款，并对自己的竞投行为负法律责任，不得在成交后以不了解为理由反悔，一经拍卖成交确认，委托人、拍卖人及”盟拍网（https://www.ympai.net）”在线拍卖系统不因拍卖标的的瑕疵或可能存在的瑕疵承担任何责任。</p>
                                <p class="textindent">六、本场网络拍卖会采用有保留价的增价式拍卖。系统对竞买人的每次成功出价都做记录，出价最高且达到或超过保留价的网络竞买人即成为拍卖标的的买受人（本场网络拍卖会的拍卖标的均设置有起拍价和保留价，竞买人出价达不到保留价拍卖不成交）。</p>
                                <p class="textindent">七、任何进入盟拍网（https://www.ympai.net）拍卖大厅参与竞买的法人及其他组织均认定已仔细阅读此《网络拍卖规则》并同意其中的各项条款和要求。竞买人应对竞买账号及密码的安全负责，并对使用竞买账号及密码进行的所有竞价活动负责。在网络竞价过程中，所有操作均视为竞买人本人真实意思的表示，由此产生的一切责任由竞买人自行承担。</p>
                                <p class="textindent">八、拍卖人为方便竞买人参加网络拍卖活动，在网上发布与标的相关的图片及其资料仅供参考。竞买人不应仅依赖图片对标的的状况做出判断，竞买人进入本次网络竞价页面，即表明已完全了解标的之一切现状，同意遵守本《网络拍卖规则》的规定和业务程序，并愿承担一切法律责任，未查验标的现状参加竞买者责任自负。委托人、拍卖人及“盟拍网（https://www.ympai.net）”在线拍卖系统不承担网络拍卖标的任何瑕疵担保责任。</p>
                                <p class="textindent">九、竞买人在网上竞得拍卖标的成为买受人后，应于拍卖成交之后立刻办理《成交确认书》等拍卖文件，中标方需在成交后两个自然日内，将标的预付货款转入委托方指定账户并与委托方签订合同，最后以实际拉货数量为准多退少补。买受人应于委托方规定日期之前将标的完成清运工作；清运结束后需向拍卖公司缴纳拍卖佣金。</p>
                                <p class="textindent">十、未成交的竞买人交付的拍卖保证金，自拍卖之日起（含拍卖当日）两个工作日内退还（不计利息），如竞买保证金退还需要支付手续费应由竞买人自行承担。</p>
                                <p class="textindent">十一、委托人及拍卖人有权对拍卖标的有关情况（包括但不限于起拍价、保留价、竞价阶梯、竞价时间、标的拍卖的顺序、图像文字资料等）在拍卖标的未开拍之前进行修改和解释，竞买人应当予以充分理解并在拍卖标的竞价过程中注意。买受人在拍卖成交后不得以拍卖标的有关情况在开拍前改变为理由反悔，一经拍卖成交确认，委托人、拍卖人及“盟拍网（https://www.ympai.net）”在线拍卖系统不因此承担任何责任。</p>
                                <p class="textindent">十二、本场网络竞价活动特别约定事项</p>
                                <p class="textindent">1、如竞买成功，买受人所缴纳的保证金，在买受人按要求拉运完标的物后，持委托方出具的相关证明文件办理退还手续。</p>
                                <p class="textindent">2、标的成交后，买受人与委托方协商办理成交标的物移交等一切事宜。标的物一经成交确认，所发生的丢失、损毁、事故、拉货过程可能产生的纠纷等责任均由买受人承担。</p>
                                <p class="textindent">3、标的物成交后，买受人应于委托方规定期限将标的物货款缴纳至委托方指定账户，并到现场交割拉货。</p>
                                <p class="textindent">买受人悔标或在规定时间内不签收相关文书、不签订合同、不足额交清货款、延期或拒绝拉货、在河北一盟拍卖有限公司指定期限内不签署《弃标承诺书》、不及时足额交清佣金，均视为买受人构成根本违约，自动放弃标的物，自愿解除与委托方之间的废旧物资销售或处置合同，并认可委托方、河北一盟拍卖有限公司有权重新组织竞价，委托方、河北一盟拍卖有限公司有权扣除买受人支付的全部保证金，并就买受人的全部违约行为，主张损害赔偿责任。
                                委托方、河北一盟拍卖有限公司重新组织竞价，第一次违约的原买受人不允许参与后续的竞买。竞价标的再行竞价的，原买受人应当支付第一次竞价中本人应当支付的佣金。再行竞价的价款低于原竞买价款的，原买受人应当补足差额。
                                经两次通知买受人拒不履行相关义务的，委托方或其授权方有权解除合同并扣除保证金，并另行委托重新竞价。保证金不足以弥补损失的，可另行主张损害赔偿。</p>
                                <p class="textindent">4、确定成交（中标）后，买受人应当自行清运成交标的物，因提货所产生的全部费用均由买受人自行承担。委托方不负责成交标的物的修整、切割、装车、运输。</p>
                                <p class="textindent">5、在现场装车过程中，一经发现买受人（包括但不限于买受人员工、买受人临时雇佣人员、与买受人有利害关系的单位及或个人等）有偷盗等违法犯罪行为，买受人将承担一切法律责任。委托方、河北一盟拍卖有限公司将扣除该买受人的竞买保证金及预缴货款，并将该买受人列入失信黑名单，禁止该买受人参与盟拍网的所有竞价。</p>
                                <p class="textindent">6、竞买人一旦参加竞投，即表示接受标的物之一切现状和本须知之全部条款，并对自己的竞投行为负法律责任，不得在成交后以不了解为理由反悔。一经成交确认，委托人、河北一盟拍卖有限公司不因标的的瑕疵或可能存在的瑕疵承担任何责任。</p>
                                <p class="textindent">7、标的物网络竞价以实物现状为准。成交一经确认，所发生的与成交标的物有关的全部费用与责任均由买受人承担，委托人、河北一盟拍卖有限公司不承担任何费用及责任。</p>
                                <p class="textindent">8、买受人持通知书和委托方财务部门开具的货款到账凭证，根据委托人的安排提货。</p>
                                <p class="textindent">9、买受人装运成交标的物时，须听从委托方有关负责人员的指挥。未经委托人允许，禁止装运本次竞价成功标的物以外的委托人物资。拉货期间，买受人应及时拉运。不能以成交标的价格下跌或其他理由拒绝拉货，否则视为违约。</p>
                                <p class="textindent">10、标的成交后，因买受人违约，委托人与其暂停合作期限内，河北一盟拍卖有限公司将不接受该买受人的任何竞价申请。</p>
                                <p class="textindent">11、竞买人在报名参加竞买时预留电话的人为其参加竞买的代理人，代理人所实施的一切行为和所签署的一切文件，竞买人均予以承认，并承担由此产生的一切法律责任。代理人就委托事项无权自行转委托他人。如确需转委托的，竞买人应出具签名盖章的书面文件。</p>
                                <p class="textindent">十三、凡购买委托方各类废旧物资的买受人（包括但不限于买受人员工、买受人临时雇佣人员、与买受人有利害关系的单位及或个人等），应遵守国家法律及委托方的各项管理制度，如为了谋取非法利益采取在计量器具上安装控制元件、遥控计量器具、秘密窃取等一切不正当手段窃取委托方物资的，委托方对采购单位做如下处理：</p>
                                <p class="textindent">（1）终止现执行的合同并终身取消后期合作；</p>
                                <p class="textindent">（2）依法追回被窃取的物资或按被窃取物资的原值进行索赔，扣除该公司保证金及货款并要承担赔偿责任；</p>
                                <p class="textindent">（3）对性质特别恶劣的，数额巨大，将依法对买受人追究其法律责任。</p>
                                <p class="textindent">十四、河北一盟拍卖有限公司坚决反对任何形式的商业贿赂行为。如果您有任何商业贿赂的线索，希望您通过如下途径向河北一盟拍卖有限公司进行举报。河北一盟拍卖有限公司承诺将对举报人信息采取绝对安全的保密措施。
                                举报邮箱：1457062469@qq.com
                                举报电话：18731185621</p>
                                <p class="textindent">十五、网上竞买风险声明</p>
                                <p class="textindent">1、因注册信息不准确、资料提供不完善、竞买保证金缴纳不及时，造成申请人用户名不能被审核通过，从而不能登录竞价大厅，河北一盟拍卖有限公司不承担任何责任。</p>
                                <p class="textindent">2、竞买人的竞买账号和密码一经转交给竞买人后，因泄露、丢失、遗忘登录密码而产生的一切后果，河北一盟拍卖有限公司不承担任何责任。</p>
                                <p class="textindent">3、由于互联网可能出现不稳定情况，不排除网络竞价发生故障（包括但不限于网络故障、电路故障、系统故障等）以及被网络恶意攻击，或因竞买人自身终端设备和网络异常等原因导致无法正常竞价的，河北一盟拍卖有限公司不承担任何责任。</p>
                                <p class="textindent">4、对于因不可抗力或本系统程序不能控制的因素导致服务中断、报价中断或其他缺陷，河北一盟拍卖有限公司不承担任何责任。</p>
                                <p class="textindent">5、凡是与本次竞买有关的任何争议、纠纷，各方应首先通过友好协商解决。如果不愿协商或经协商后仍不能解决时，任何一方均应向本次竞买的组织者河北一盟拍卖有限公司住所地即石家庄市新华区人民法院提起民事诉讼。</p>
                                <p class="textindent">十六、竞买人及或买受人同意在与河北一盟拍卖有限公司、委托方的合作中出现任何违反《竞买公告》《竞买须知》及拍卖方、委托方补充告知的包括但不限于时间节点、佣金比例、其他须遵守的事宜等行为，河北一盟拍卖有限公司或委托方均有权将该竞买人及或买受人所缴纳保证金扣除（不论该条款或者告知事项是否单独约定了保证金扣除事宜），并列入盟拍网的失信黑名单，同时禁止该竞买人及或买受人参与盟拍网的所有竞价。</p>
                                <p class="textindent">十七、其他特别约定事宜 </p>
                                <p class="textindent">1、委托方、河北一盟拍卖有限公司主张自身合法权利、追究买受人违约责任所产生的包含但不限于诉讼费、保全费、鉴定费、差旅费、律师费等全部费用，均由买受人承担。竞买人、买受人工商注册地址视为商业文书及司法文书送达地址，地址变更的应当及时提供加盖公章新地址，否则以原地址为准。授权委托书留有地址的，以该地址为准。</p>
                                <p class="textindent">2、鉴于，本次物资处置中委托方、拍卖方需要付出巨大人力、物力；处置进程对委托方影响巨大，买受人违约行为所导致的延误，将造成委托方的巨大损失。故竞买人参与本次竞买，须接受并认可本次保证金的数额，及本次竞价过程中因违反《竞买公告》《竞买须知》所承担的全部保证金扣除及违约责任的承担等全部事宜，承诺放弃违约责任过高等抗辩条款，并对此不持任何异议。</p>
                                <p class="textindent">3、竞价过程及成交后,如发生不可抗力，委托方、河北一盟拍卖有限公司和买受人三方不承担违约责任，受不可抗力影响的一方，应在不可抗力发生后的三日内通知其他方，并在不可抗力发生后十五日内用特快专递邮寄相关的主管部门签发的证明文件，以便协商解决，其他各方审查、确认。</p>
                                <p class="textindent">4、凡参加本次竞价的竞买人皆视为理解本规则告知的所有内容，同意接受本规则约束，同意按本规则解决可能存在的争议，接受规则对法律、法规、部门规章、行业惯例等非效力性禁止条款的变通。</p>
                                <p class="textindent">5、本次竞价所称“竞买须知及相关事宜”包括但不限于盟拍网《竞买公告》《竞买须知》（包含《重要通知》《网络竞价规则》）及本次交易过程工作人员所额外发送或告知的文件及相关履约事项。“竞买须知及相关事宜”构成对买受人与委托方所签订废旧物资处置或买卖合同的补充，对买受人具有同样约束力。但两者不一致的，以合同为准。</p>
                                <p class="textindent">十八、撮合成交是指因最高出价未达到委托方的保留价等相关情形而导致竞价未成交，经河北一盟拍卖有限公司撮合出价人与委托方达成买卖合意的成交方式。
                                撮合成交与竞拍成交具备相同法律效力；委托人同意放弃保留价后，买受人或买受人的委托人，以其出价接受成交的意思表示，做出即生效。买受人收到《成交确认书》之后，即应严格按照要求及时履行签订处置合同、交纳预付货款等相关义务，无故违背“竞买须知及相关事宜”要求变更或拒绝履行相关义务的，需承担保证金扣除、赔偿损失等责任。
                                买受人承诺认可撮合成交具备与拍卖成交相同的法律效力，撮合成交后须严格遵守并执行“竞买须知及相关事宜”，撮合成交买受人违反前述要求的，自愿承担相应的违约责任。前述“竞买须知及相关事宜”存在具体履行时间要求的，根据收到撮合《成交确认书》时间做相应的顺延。</p>
                                <p style="font-weight: 700;">本次竞价对委托方其他关联项目影响重大，出现延误将产生难以弥补的损失，故对本次竞价进程要求极为严苛，且约定违约责任亦相对较重，望不能遵守相关规则及约定者谨慎参与，一旦参与需在此不可撤销地确认：上述内容已认真阅读、充分理解，系自身真实的意思表示，规则不属于格式条款，不存在重大误解、显失公平、被胁迫、被欺诈等情形，各方均对上述条款给与了详细说明，承诺完全遵守，对签名、盖章的真实性、合法性、关联性承担全部责任。</p>

                             </div>
                


                        </el-tab-pane>
                        <el-tab-pane label="标的介绍">
                            <div class="lotsIntroduce">
                                <p class="big_text" v-html="lotsObj.description"></p>
                            </div>
                            <div class="imageList_box">
                                <el-image v-for="(item,i) in lotsObj.images" :key="i" :src="imgurls+item" :preview-src-list="imageData"></el-image>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label">
                                竞价记录(
                                    <span class="red">{{total}}</span>
                                    )</span>
                            <el-table
                                :header-cell-style="{background:'#F5F6F7'}"
                                :data="bidRecordData"
                                style="width: 100%">
                                <el-table-column prop="stateOnly" label="状态">
                                    <template slot-scope="scope">
                                        <div class="red" v-if="scope.row.state == '2'">撤销</div>
                                        <div class="red" v-if="scope.row.state == '1'&&scope.row.is_first == 1">{{lotsObj.state=='3'?'成交':'领先'}}</div>
                                        <div v-if="scope.row.state == '1'&&scope.row.is_first == 0">出局</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="bidnum" label="竞买号"></el-table-column>
                                <el-table-column prop="price" label="价格"></el-table-column>
                                <el-table-column prop="create_time" label="时间"></el-table-column>
                            </el-table>
                            <div class="footer_page">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                                    :page-sizes="[12,20, 30, 40,50]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                                    :total="total">
                                </el-pagination>  
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
        <el-dialog
        :visible.sync="dialogVisible"
        width="480px"
        :before-close="handleClose">
        <div class="dis_con_out">
            <div class="first_line">
                尊敬的
                <span class="pic_fl">{{lotsObj.bidnum}}</span>
                号，您提交的竞价为：
            </div>
            <div class="second_line">
                <div>
                    人民币：
                    <span class="money_sl">{{box_money}}</span>
                    <!-- <span class="money_sl">{{lotsObj.top_price}}</span> -->
                    元
                </div>
                <div class="bigWord">
                    {{capitalWord}}
                    <!-- {{number_chinese( lotsObj.top_price )}} -->
                    
                </div>
            </div>
            <div v-if="firstbidnum == lotsObj.bidnum" style="color: #d13a29;font-weight: 700;">温馨提示：目前您的竞拍价已处于领先位置，请确认是否再次出价</div>
        </div>
        <span slot="footer" class="dialog-footer d_foot_btn">
            <el-button class="btn_cf" @click="cancelOutbid">取 消</el-button>
            <el-button class="btn_f" @click="confirmOutbid">确定出价</el-button>
        </span>
        </el-dialog>
        <audio src="@/assets/MP3/aigei_com.mp3" ref="audio" muted></audio>
    </div>
</template>

<script>
import {lotsDetails, lotsDetailSearch,bidRecord,messageLog,lotsOfferPice,clickFollow,network_end} from '@/api/interface'
import {realNameData} from '@/api/user'
import {_debounce,getUserInfoID,timestampToTime,setMinutes,number_chinese,timestampToTimeTow} from '@/utils/auth'
import CountdownWorker from "worker-loader!@/utils/countdown-worker.js"
import auctionList from './auctionList.vue'
import bidInstruction from './bidInstruction.vue'
import znHint from '@/components/title/znHint.vue'
import greenHint from '@/components/title/greenHint.vue'
export default{
    name:'datail',
    inject: ['reload'],
    components:{
        auctionList,bidInstruction,znHint,greenHint
    },
    data() {
        return {
            showPlaceholder: true,
            uid:'',
            card_type:'',
            auctionObj:{},
            auctioneerObj:{},
            lotsObj:{},
            tableData:[],
            list:[],
            searchPic:[],
            bidRecordData:[],
            aes_userid:'',
            socket:"",
            enForMoney:true,
            money:'',
            _interval:"",
            ddCountDown:null,
            hhCountDown:null,
            mmCountDown:null,
            ssCountDown:null,
            nowFree_dd:false,
            // free_days:'',
            // free_hours:'',
            // free_minutes:'',
            // free_second:'',
            freedomTime:'',
            tremTime:'',
            timeFree:'',
            imagesArylots:[],
            imagesItem:{},
            index: 0, //现在是第几张
            width: 0, //移动的长度
            auctioneerImg:'',

            offerPrice:false,
            drawer:false,
            network_endData:'',
            ssNext:'',
            topShow:false,
            topStyle: { transform: '' },
            rShow: false,
            r_img: {},
            imageData:[],
            page:1,
            limit:12,
            total: 0,
            auctionStartTime:"",
            now_user_offercount:"",
            dialogVisible:false,
            firstbidnum:'',
            capitalWord:"",
            box_money:'',
            timerId:null,
            numberCapital:'',
            dataTime:'',
            towDataTime:'',
            showTooltip: false,
             // 降价拍时间专用
            priceCountdownWorker: null, // 降价倒计时Worker
        };
    },
    computed: {
      changePic() {
        return {
          transform: `translate3d(${this.width}px, 0, 0)`, //主要实现核心
        };
      },
    },
    created(){
      
        document.addEventListener('visibilitychange', () => {
        if(document.visibilityState === 'hidden') { // 离开当前tab标签
            // 离开
            // console.log('那我走？我走了啊？我可真走了。。');
        } else {
            // 回来
            let query = this.$route.query;
            this.details(query.lotsId,query.auctionid);
        }
        });
        // setTimeout(() => {
        //     this.showPlaceholder = true;
        // }, 1000);
        var info = getUserInfoID();
        if(info){
            this.uid = JSON.parse(info).id;
            this.card_type = JSON.parse(info).card_type;
        }else{
            this.uid = '';
        }
        this.$emit('public_header', {header:true,footer:true});
    },
    mounted(){
        this.$nextTick(() => {
            if(this.$refs.msgbox!==undefined){
                this.$refs.mianscroll.scrollTop = this.$refs.msgbox.scrollHeight;
            }
            
      });
      let query = this.$route.query;
      this.getLotsDetails(query.lotsId,query.auctionid);
       // 添加降价拍时间倒计时初始化
      this.initPriceCountdown();
    //   document.querySelector('.el-input-number > .el-input > input').disabled = true;
    },
     methods: {
     number_chinese,

        init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                // this.socket = new WebSocket(`ws://39.103.214.94:9501?token=${this.aes_userid}`)
                this.socket = new WebSocket(`wss://www.ympai.net/wss?token=${this.aes_userid}`)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // // 监听socket消息
                this.socket.onmessage = this.getMessage;
                // 销毁监听
                this.socket.onclose = this.close;
            }
        },
        open (e) {
            setInterval(()=>{
                this.send('ping')
            },10000)
            // console.log('open')
        },
        error(e) {
            // console.log("连接错误",e)
        },
        getMessage (msg) {
            if(msg.data){
                let res = JSON.parse(msg.data);
                if(Object.keys(res).indexOf('minprice') == 1){
                    delete res.data.minprice;
                }
            
            switch (res.type){
                case 'lot_info':
                if(res.data.hasOwnProperty("top_price")){
                    this.$refs['audio'].play();
                }
                    for (let item1 in this.lotsObj){
                        if (this.lotsObj.id == res.data.id) {
                            if(res.data.top_user){
                                if(res.data.top_user == this.uid){
                                    this.now_user_offercount = res.data.now_user_offercount;
                                }
                            }
                            for (let item in res.data) {
                                if(item == 'rateladder'|| item =='top_price'){
                                    res.data[item] = parseFloat(res.data[item]);
                                }
                                if(item == 'end_time'){
                                    res.data[item] = timestampToTime(res.data[item]).ymdhms;
                                }
                                this.lotsObj[item] = res.data[item];
                            }
                            break;
                        }
                    }

                    if(this.countdownWorker){
                        this.countdownWorker.terminate();
                        this.countdownWorker = null; 
                    }
                    // 降价拍时间更新
                    if (this.lotsObj.bidmode == '2' && res.data.decrease_interval) {
                        // 重新启动降价倒计时
                        this.startPriceCountdown();
                        // console.log('this.startPriceCountdown getMessage','我在这里被执行');
                    }
                    if(this.lotsObj.bidmode == '1'){
                     this.countdown();   
                    //  console.log('this.countdown getMessage','我在这里被执行');
                    }
                    
                    let query = this.$route.query;
                    this.details(query.lotsId,query.auctionid);
                    this.timerId = setTimeout(()=>{
                        this.getBidRecordData();//获取table出价列表getBidRecordData
                        this.set_price();

                    },200);
                    break;
                case 'auction_info':
                    
                   
                    break;
                case 'teacher_chats':
                    this.list.unshift(res.data)
                    // 拍卖师消息到最底部
                    // setTimeout(function(){
                    //     this.$nextTick(() => {
                    //         if(this.$refs.msgbox!==undefined){
                    //             this.$refs.mianscroll.scrollTop(99999999);
                    //             // this.$refs.mianscroll.scrollTop = this.$refs.msgbox.scrollHeight;
                    //         }
                            
                    //     }); 
                    // },200)
                    
                    break;
			    }
            }
           
        },
        send(parms) {
            this.socket.send(parms)
        },
        close () {
            // console.log("socket已经关闭")
        },
        lotsAllData(id){
            // var query1 = this.$route.query;
            // this.$route.query.lotsId = id;
            this.$router.push({
                query:{...this.$route.query,lotsId:id}
            });
            this.reload()// 需要刷新页面
        },
         // 时间格式化方法
        time(timeStr) {
        if (!timeStr) return null
        return new Date(timeStr).getTime() / 1000
        },
         // 降价拍倒计时初始化
        initPriceCountdown() {
            if (this.lotsObj.bidmode == '2') { // 降价拍模式
                this.startPriceCountdown();
            }
        },
        getLotsDetails(lotsId,auctionid){
            var obj = {
                lots_id:lotsId,
                auction_id:auctionid,
                return_type:'1'
            }
            lotsDetails(obj).then(res =>{
                this.auctionObj = res.data.auction;
                this.auctioneerObj = res.data.auctioneer;
                this.auctioneerImg = res.data.auctioneer.head_image;
                this.lotsObj = res.data.lots;
                this.dataTime =timestampToTime(res.data.lots.start_time).ymdhms ;
                this.towDataTime=timestampToTimeTow(res.data.lots.start_time).ymdhms
                // this.lotsObj.start_time = this.time(res.data.lots.start_time);
                // console.log(this.lotsObj.bidmode ,'返回的全部详情数据');

                  this.numberCapital= this.toChineseNumber(this.lotsObj.bond)
                this.now_user_offercount = res.data.lots.now_user_offercount;
                this.auctionStartTime = timestampToTime(res.data.auction.start_time).ymdhms;
                var imageList = [];
                res.data.lots.images.forEach(item =>{
					imageList.push({only:'1',url:item});
					this.imageData.push(this.imgurls+item);
				});
                if(res.data.lots.video){
					imageList.unshift({only:'2',url:res.data.lots.video})	
				}
				this.imagesArylots = imageList;
                this.imagesItem = this.imagesArylots[0];

                if(res.data.lots.price){
                    this.lotsObj['top_price']=parseFloat(res.data.lots.price);
                    this.money= res.data.lots.price;
                }else{
                    this.lotsObj['top_price']=parseFloat(res.data.lots.startprice);
                    this.money= res.data.lots.startprice;  
                }
                this.rateladder = res.data.lots.rateladder;
                if(this.lotsObj.description){
                    this.lotsObj.description = this.showHtml(this.lotsObj.description);
                }
                if(this.lotsObj.announcement){
                    this.lotsObj.announcement = this.showHtml(this.lotsObj.announcement);
                }
                if(this.lotsObj.important){
                    this.lotsObj.important = this.showHtml(this.lotsObj.important);
                }
                this.aes_userid = res.data.aes_userid;
                this.freedomTime = this.setMinutes(this.lotsObj.freedom_time);
                this.tremTime= this.setMinutes(this.lotsObj.trem_time);
                this.lotsObj.end_time = timestampToTime(this.lotsObj.end_time).ymdhms;
                this.init();
                this.ifShowHtml();//根据状态判断是否显示
                if( this.lotsObj.state == 2 && this.lotsObj.bidmode == '2'){
                     this.startPriceCountdown();
                }else if(this.lotsObj.state == 2 && this.lotsObj.bidmode == '1'){
                    this.countdown();    
                }
                // console.log('我在这执行了 getLotsDetails',this.lotsObj.state,this.lotsObj.bidmode)
                this.set_price();
            })
            lotsDetailSearch({lots_id:lotsId,auction_id:auctionid}).then(res => {
                // console.log('searchPic',res.data)
                this.searchPic = res.data;
            })
            this.getBidRecordData();
            messageLog({lots_id:lotsId}).then(res=>{
                this.list=res.data.reverse();
            })

        },
        details(lotsId,auctionid){
            var obj = {
                lots_id:lotsId,
                auction_id:auctionid,
                return_type:'1'
            }
            lotsDetails(obj).then(res =>{
                this.auctionObj = res.data.auction;
                this.auctioneerObj = res.data.auctioneer;
                this.auctioneerImg = res.data.auctioneer.head_image;
                this.lotsObj = res.data.lots;
                this.now_user_offercount = res.data.lots.now_user_offercount;
                this.auctionStartTime = timestampToTime(res.data.auction.start_time).ymdhms;
                var imageList = [];
                res.data.lots.images.forEach(item =>{
					imageList.push({only:'1',url:item});
					this.imageData.push(this.imgurls+item);
				});
                if(res.data.lots.video){
					imageList.unshift({only:'2',url:res.data.lots.video})	
				}
				this.imagesArylots = imageList;
                this.imagesItem = this.imagesArylots[0];

                this.rateladder = res.data.lots.rateladder;
                if(this.lotsObj.description){
                    this.lotsObj.description = this.showHtml(this.lotsObj.description);
                }
                if(this.lotsObj.announcement){
                    this.lotsObj.announcement = this.showHtml(this.lotsObj.announcement);
                }
                if(this.lotsObj.important){
                    this.lotsObj.important = this.showHtml(this.lotsObj.important);
                }
                this.aes_userid = res.data.aes_userid;
                this.freedomTime = this.setMinutes(this.lotsObj.freedom_time);
                this.tremTime= this.setMinutes(this.lotsObj.trem_time);
                this.lotsObj.end_time = timestampToTime(this.lotsObj.end_time).ymdhms;
                this.ifShowHtml();//根据状态判断是否显示
                
                this.set_price();
            })

            lotsDetailSearch({lots_id:lotsId,auction_id:auctionid}).then(res => {
                // console.log('searchPic',res.data)
                this.searchPic = res.data;
            })
        },
        //点击确认出价
        confirmOutbid(){
            this.offerPrice = false;
            this.dialogVisible = false; 
            // let newPrice =this.box_money
            // // this.box_money
            lotsOfferPice({lots_id:this.$route.query.lotsId,price:this.box_money}).then(res=>{
                this.$message({
                    message: res.msg,
                    type: "success",
                });
            }).catch(err=>{
                
                if(err.code == 40001){
                    this.$message({
                        message: err.msg,
                        type: "error",
                    });
                }else if(err.code == -200){
                    this.$message({
                        message: err.msg,
                        type: "error",
                    });
                }
                
            });  
        },
        cancelOutbid(){
            this.offerPrice = false; 
            this.dialogVisible = false; 
        },
        handleClose(){
            this.offerPrice = false; 
            this.dialogVisible = false; 
        },
        outLotsOfferBtn:_debounce(function(){
            this.capitalWord = number_chinese(this.money);
            this.box_money = this.money;
            this.dialogVisible = true;      
        }),
        getBidRecordData(){
            var query1 = this.$route.query;
            bidRecord({lots_id:query1.lotsId,page:this.page,limit:this.limit}).then(res=>{
                this.disposeRecordList(res.data);
                this.total = res.count;
            })
        },
        
        /**处理数据**/
        disposeRecordList(list){
            if(list.length > 0){
                this.firstbidnum = list[0].bidnum;
            }
            
            list.forEach(item =>{
                // lotsObj.bidnum
                // item.bidnum = 
                if(this.lotsObj.bidnum == item.bidnum){
                    // item.bidnum = item.bidnum+'(我)'
                    item.bidnum = '我';
                }
            })
            this.bidRecordData =list;

            this.tableData = this.bidRecordData.slice(0,3);
        },
        // 增加拍时间
        countdown() {
            console.log('开始执行');
            var countTime = this.lotsObj.countdown_time;
            var state = JSON.parse(this.lotsObj.state);
            if(countTime > 0 && state == 2){
                var times = setMinutes(countTime);
                this.ddCountDown = times.day;
                this.hhCountDown = times.hr;
                this.mmCountDown = times.min;
                this.ssCountDown = times.sec;
                if(this.countdownWorker){
                    // 向Worker线程发送倒计时时间
                    this.countdownWorker.postMessage({ seconds:countTime });
                }else{
                    this.countdownWorker = new CountdownWorker();
                    this.countdownWorker.postMessage({ seconds:countTime });
                    this.countdownWorker.onmessage = event =>{
                        if (event.data.timeout) {
                            this.ddCountDown = '00';
                            this.hhCountDown = '00';
                            this.mmCountDown = '00';
                            this.ssCountDown = '00';
                            let query = this.$route.query;
                            this.getLotsDetails(query.lotsId,query.auctionid);
                                if(this.countdownWorker){
                                    this.countdownWorker.terminate();
                                    this.countdownWorker = null;
                                }
                                if(this.auctionObj.mode=='2'){
                                    this.endLotsClose();
                                }
                        } else {
                            if(event.data.count >= this.lotsObj.trem_time){
                                this.lotsObj.countdown_time=event.data.count;
                                this.nowFree_dd = false;
                            }else{
                                this.nowFree_dd = true;
                            }
                            this.ddCountDown = event.data.ddCountDown;
                            this.hhCountDown = event.data.hhCountDown;
                            this.mmCountDown = event.data.mmCountDown;
                            this.ssCountDown = event.data.ssCountDown;
                            
                        }
                    };
                }
            }else{
                this.ddCountDown = '00';
                this.hhCountDown = '00';
                this.mmCountDown = '00';
                this.ssCountDown = '00';
                if(this.countdownWorker){
                    this.countdownWorker.terminate();
                    this.countdownWorker = null;
                    // this.countdownWorker.postMessage('stop');
                }
            }
        },
        //降价拍-倒计时逻辑
    startPriceCountdown() {
        console.log('startPriceCountdown');
        const decreaseInterval = 60;
         var state = JSON.parse(this.lotsObj.state);
        if (decreaseInterval > 0 && state == 2) {
            // 清理之前的Worker
            if (this.priceCountdownWorker) {
                this.priceCountdownWorker.terminate();
            }
            
            this.priceCountdownWorker = new CountdownWorker();
            this.priceCountdownWorker.postMessage({ seconds: decreaseInterval });
            
            this.priceCountdownWorker.onmessage = event => {
                if (event.data.timeout) {
                    // 时间到，重新获取数据
                    this.refreshLotsDetails();
                } else {
                    // 更新倒计时显示
                    this.ddCountDown = event.data.ddCountDown;
                    this.hhCountDown = event.data.hhCountDown;
                    this.mmCountDown = event.data.mmCountDown;
                    this.ssCountDown = event.data.ssCountDown;
                }
            };
        }
    },
    
    // 刷新拍品详情获取最新时间
    refreshLotsDetails() {
        let query = this.$route.query;
        this.getLotsDetails(query.lotsId, query.auctionid);
        if(this.countdownWorker){
            this.countdownWorker.terminate();
            this.countdownWorker = null;
        }
    },
        //****网络拍-倒计时结束调接口******network_end
        endLotsClose(){
            network_end({lots_id:this.lotsObj.id}).then((res) => {
                if(res.data.next_id){
                    this.drawer = true;
                    this.nextCountdown(res.data.interval_time);
                    this.network_endData = res.data;
                    
                }
            });
        },
        /**点击确认切换**/ 
        nextMark(){
            this.$router.push({
                query:{...this.$route.query,lotsId:this.network_endData.next_id}
            });
            this.reload()// 需要刷新页面
        },
        sync(){
            var xhr = new XMLHttpRequest();
            xhr.open('get', '/', true);
            xhr.onreadystatechange = function() {
            if (xhr.readyState === 3) {
                var now = xhr.getResponseHeader('Date');
                var nowTime = new Date(now).valueOf()/1000;//没有毫秒值，我们倒计时的最小单位是秒。有毫秒，不除以1000
                this_count_down =this_start_time - nowTime;
                xhr.abort();
            }
            };
            xhr.send(null);
        },


        //计算出价 - 加价
        set_price(){
            if(!this.offerPrice){
                var p = this.lotsObj.top_price;
                var s = this.lotsObj.startprice;
                var r = this.lotsObj.rateladder;
                this.money = p > 0 ? (parseFloat(p)*100 + parseFloat(r)*100)/100 : (parseFloat(s)*100 + parseFloat(r)*100)/100; 
            }
           
        },
        moneyChange(value){
            this.offerPrice = true;

            var p = this.lotsObj.top_price;
                var s = this.lotsObj.startprice;
                var r = this.lotsObj.rateladder;
                let money = p > 0 ? (parseFloat(p)*100 + parseFloat(r)*100)/100 : (parseFloat(s)*100 + parseFloat(r)*100)/100;
                if(this.total){
                    if(this.money < money){
                        this.$message({
                            message: '出价不可小于（当前价格+加价幅度）',
                            type: 'warning'
                        });
                    }
                }
        },
        firstRowStyle({row,rowIndex}){
            if(rowIndex==0){
                return "table_firstRow"
            }
        },
        // 富文本处理
        showHtml(str){
        return str
            .replace(str ? /&(?!#?\w+;)/g : /&/g, '&amp;')
            .replace(/&lt;/g,"<")
            .replace(/&gt;/g,">")
            .replace(/&quot;/g,"\"")
            .replace(/&#39;/g, "\'")
            .replace(/&amp;nbsp;/g,'\u3000')
        },
        enterFor(a_id,l_id,only){
            if(this.uid){
                if(this.lotsObj.applicantstype=='1'){
                    if(this.card_type == '1'){
                        this.enterForDis(a_id,l_id,only);
                    }else{
                        this.$message({
                            message: '该标的仅限个人报名',
                            type: 'warning'
                        });
                    }
                }else if(this.lotsObj.applicantstype=='2'){
                    if(this.card_type == '2'){
                        this.enterForDis(a_id,l_id,only);
                    }else{
                        this.$message({
                            message: '该标的仅限机构报名',
                            type: 'warning'
                        });
                    }
                }else{
                        this.enterForDis(a_id,l_id,only);
                }
                
            }else{
                this.$message({
                    message: '请先登录',
                    type: 'warning'
                });
                this.$router.push({path:'/login'});
            }
            
        },
        enterForDis(a_id,l_id,only){
            if(only=='0'){
                    this.$alert('该报名已截止', '提示');
                }else{
                    realNameData({id:this.uid}).then(res =>{
                        if(res.data[0].authen == '1'){
                            this.$router.push({path:'/lots/registerFor',query: {lotsId:l_id,auctionid:a_id}});
                        }else if(res.data[0].authen == '2'){
                            // 审核中
                            this.$message({
                                message: '您的实名认证正在审核中',
                                type: 'warning'
                            });
                        }else if(res.data[0].authen == '3'){
                            // 被驳回
                            this.$message({
                                message: '您的实名认证被驳回',
                                type: 'warning'
                            });
                        }else{
                            // 未认证
                            this.$message({
                                message: '请先去个人中心进行实名认证',
                                type: 'warning'
                            });
                            // 跳转到实名认证
                            this.$router.push({path:'/userCenter/userInfo',query: {index:'1'}});
                        }
                         
                    }); 
                   
                }
        },
        ifShowHtml(){
            if(this.lotsObj.state=='1'){
                if(this.lotsObj.is_entry==1 || this.lotsObj.is_entry==0){
                    this.enForMoney=true;
                }else{
                    this.enForMoney=false;
                }
            }else if(this.lotsObj.state=='2'||this.lotsObj.state=='3'){
                this.enForMoney=true;
            }
        },
        // ---------------------------------------
        go(direc) {
            if (direc == -1) {
            this.index = this.index >= this.imagesArylots.length - 1 ? 0 : this.index + 1;
            } else if (direc == 1) {
            this.index = this.index <= 0 ? this.imagesArylots.length - 1 : this.index - 1;
            }
            // console.log("index:", this.index);
            this.move(); //移动
        },
        move() {
            this.width = -148 * this.index;
            // console.log("width:", this.width);
        },
        imageShow(i){
            this.imagesItem = this.imagesArylots[i];
        },
        //星星关注
        attentionStar(id){
            if(this.uid){
                clickFollow({id:this.uid,lots_id:id}).then(res =>{
                    if(res.code == 200){
                        // let newObj = Object.assign({uid:this.uid}, this.filterObj)
                        // this.getLotsCardList(newObj);
                        let query = this.$route.query;
                        this.getLotsDetails(query.lotsId,query.auctionid);
                        
                    }
                });
            }else{
                this.$message({
                    message: '请先登录',
                    type: 'warning'
                });
                this.$router.push({path:'/login'});
            }
            
        },
        /**距离下场标的开始倒计时 -网络拍**/ 
        nextCountdown(ss){
            if(ss > 0){
                if(this.countdownWorker){
                    this.countdownWorker.postMessage('start')
                }else{
                    this.countdownWorker = new CountdownWorker();
                    this.countdownWorker.onmessage = event =>{
                        if(event.data === 'tick'){
                            ss--;
                            this.ssNext = ss;
                            if(ss==0){
                                this.ssNext = '00';
                                // 计时结束，清除缓存
                                if(this.countdownWorker){
                                    this.countdownWorker.terminate();
                                }
                            }
                        }
                    };
                    this.countdownWorker.postMessage('start');
                }
            }
        },
        setMinutes(date) {
            var day = Math.floor(date / 60 / 60 / 24).toString().padStart(2, "0");
            var hr = Math.floor((date / 60 / 60) % 24).toString().padStart(2, "0");
            var min = Math.floor((date / 60) % 60).toString().padStart(2, "0");
            var sec = Math.floor(date % 60).toString().padStart(2, "0");
            var tt;
            if(day !== '00'){
                tt =`${day}天${hr}时${min}分${sec}秒` 
            }else if(day == '00'&& hr !== '00'){
                tt =`${hr}时${min}分${sec}秒` 
            }else if(day == '00'&& hr == '00'&&min !== '00'){
                tt =`${min}分${sec}秒` 
            }else if(day == '00'&& hr == '00'&&min == '00'&& sec !== '00'){
                tt =`${sec}秒` 
            }
            return tt;
        },
        // 图片放大
        // 鼠标进入原图空间函数
        enterHandler() {
        // 层罩及放大空间的显示
        this.topShow = true
        this.rShow = true
        },
        // 鼠标移动函数
        moveHandler(event) {
            // 鼠标的坐标位置
            let x = event.offsetX
            let y = event.offsetY
            // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
            let topX = x - 100 < 0 ? 0 : x - 100
            let topY = y - 100 < 0 ? 0 : y - 100
        
            // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
            if (topX > 210) {
                topX = 210
            }
            if (topY > 150) {
                topY = 150
            }
            // 通过 transform 进行移动控制
            this.topStyle.transform = `translate(${topX}px,${topY}px)`
            this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`
        },
        // 鼠标移出函数
        outHandler() {
            // 控制层罩与放大空间的隐藏
            this.topShow = false
            this.rShow = false
        },
        // ---------竞价记录分页
        handleSizeChange(val) {
            this.limit = val;
            this.getBidRecordData();
        },
        //----- 竞价记录分页---------
        handleCurrentChange(val) {
            this.page = val;
            this.getBidRecordData();
        },
         // 数字转大写
    toChineseNumber(num) {
      let units = ['', '拾', '佰', '仟'];
    let sections = ['', '万', '亿', '万亿'];
    let chineseDigits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
 
    if (num === 0) return chineseDigits[0];
 
    let result = '';
    let sectionIndex = 0;
    let isZero = false; // 标记是否需要插入零
 
    while (num > 0) {
        let part = num % 10000; // 获取每四位数字
        if (num > 10 && isZero) {
            result = chineseDigits[0] + result; // 在数字间插入零
        }
        isZero = false; // 重置零标记
        let partStr = '';
        let unitIndex = 0;
 
        while (part > 0) {
            let digit = part % 10;
            if (digit === 0) {
                isZero = true; // 标记当前位置为0，下一个非零数字前需要插入零
            } else {
                partStr = chineseDigits[digit] + units[unitIndex] + partStr;
            }
            part = Math.floor(part / 10);
            unitIndex++;
        }
        result = partStr + sections[sectionIndex] + result;
        num = Math.floor(num / 10000);
        sectionIndex++;
    }
    return result;

    }
        
    },
    beforeDestroy() {
        if(this.countdownWorker){
            this.countdownWorker.terminate();
        }
        // 清理降价倒计时Worker
        if (this.priceCountdownWorker) {
            this.priceCountdownWorker.terminate();
            this.priceCountdownWorker = null;
        }
    },
     destroyed () {
        // 销毁监听
        this.socket.onclose();
        clearTimeout(this.timerId);
    }
   
}

</script>
<style lang="less" scoped>
@import '@/styles/index.less';

[v-cloak] {
  display: none;
}
.mid_line{
    height: 16px;
    // background-color: #F5F6F7;
}
.datail{
    background-color: #f6fafd;
    min-height: 100vh;
    .placeholder{
        background-color: #fff;
        min-height: 100vh;
    }
    .box{
        // background-color: #fff;
        min-height: 100vh;
        padding-top: 16px;
    }
    .tip_box{
        background-color: #fdf6ec;
        height: 100px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .closeWIN{
            position: absolute;
            top: 0;
            right: 0;
            padding: 10px;
            font-size: 20px;
        }
        .infoTip_box{
            text-align: center;
            .btn_box{
                padding-top: 20px;
                .left_btn{
                    margin-right: 40px;
                }
            }
        }
    }
}

.con{
    display: flex;
    height: 526px;
    .chatPic{
        width: 895px;
       padding: 20px;
       background-color: #fff;
       margin-right: 10px;
       h4{
        padding-bottom:10px;
       }
        .pic_time{
                display: flex;
                position: relative;
                // background-color: #fff;
                .pic{
                    width: 50%;
                    .pic-box{
                        width: 420px;
                        height: 300px;
                        border: 1px solid #ebeaea;
                        background-color: #f7f6f6;
                        .img_b{
                            display: block;
                            width: 100%;
                            height: 100%;
                            position: relative;
                            .top {
                                width: 210px;
                                height: 150px;
                                background-color: lightcoral;
                                opacity: 0.4;
                                position: absolute;
                                top: 0;
                                left: 0;
                            }
                            .maskTop {
                                width: 420px;
                                height: 300px;
                                position: absolute;
                                z-index: 1;
                                top: 0;
                                left: 0;
                            }
                            img{
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                            }
                        }
                        
                    }

                    .pic_list{
                        width: 410px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top:10px;
                        padding: 5px;
                        .pic_con{
                            width: 700px;
                            overflow:hidden;
                            margin: 0 13px;
                            .pic_ul{
                                display: flex;
                                height: 124px;
                                line-height: 124px;
                                transition: 0.5s ease;
                                li{
                                    padding: 5px;
                                    height: 124px;
                                    .img_box{
                                        display: block;
                                        width: 140px; 
                                        height: 110px;
                                        // overflow: hidden;
                                        img{
                                            width: 100%;
                                            height: 100%;
                                            object-fit: contain;
                                        }
                                        video{
                                            width: 100%;
                                            height: 100%;
                                        }
                                    }
                                   
                                    // .img_border{
                                    //     border: 1px solid @base-color;
                                    // }
                                    // em{
                                    //     width: 30px;
                                    //     height: 16px;
                                    //     background: rgba(51,51,51,.5);
                                    //     font-size: 10px;
                                    //     line-height: 16px;
                                    //     top: 5px;
                                    //     left: 5px;
                                    //     z-index: 10000;
                                    //     border-radius: 2px;
                                    //     color: #fff;
                                    //     position: absolute;
                                    //     text-align: center;

                                    // }
                                    
                                    // .pic_ul_tit{
                                    //     // margin-top: 20px;.
                                    //     width: 106px;
                                    //     text-align: center;
                                    //     position: absolute;
                                    //     font-size: 12px;
                                    //     height: 30px;
                                    //     bottom: 0;
                                    //     // --------
                                    //     overflow: hidden;
                                    //     text-overflow: ellipsis;
                                    //     /* 将对象作为弹性伸缩盒子模型显示 */
                                    //     display: -webkit-box;
                                    //     /* 限制在一个块元素显示的文本的行数 */
                                    //     /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
                                    //     -webkit-line-clamp: 2;
                                    //     /* 设置或检索伸缩盒对象的子元素的排列方式 */
                                    //     -webkit-box-orient: vertical;
                                    // }
                                }
                            }
                        }
                        .left_btn{
                            font-size: 40px;
                            color: #ccc;
                        }
                        .right_btn{
                            font-size: 40px;
                            color: #ccc;
                        }
                    }
                    .starOnlooker{
                        display: flex;
                        color: #999;
                        font-size: 12px;
                        .right{
                            margin-right: 30px;
                            display: flex;
                            align-items: center;
                        }
                    }
                }
                .time_money{
                    width: 50%;
                    position: relative;
                    .right {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 420px;
                        height: 300px;
                        border: 1px solid red;
                        overflow: hidden;
                        background: #fff;
                        .rightImg {
                            display: inline-block;
                            width: 840px;
                            height: 600px;
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: 9999;
                        }
                    }

                    .enter_for{
                        // height: 285px;   
                        .count_down{
                            display: flex;
                            align-items: center;
                            // background-color: #ccc;
                            padding-bottom:12px;
                            height: 22px;
                            .J_underway{
                                height: 28px;
                                line-height: 28px;
                                font-size: 14px;
                                padding: 0px 10px;
                                // background-color: #cc0000;
                                color: #fff;
                                margin-right: 10px;
                                border-radius:14px;
                            }
                            .J_TimeTitle{
                                font-size: 12px;  
                                line-height: 22px;  
                                margin-right: 10px;
                            }
                            .J_TimeLeft{
                                line-height: 22px;
                                .big_word{
                                    font-size: 22px;
                                    // font-weight: bold;
                                    padding-right: 4px;
                                }
                                .small_word{
                                    font-size: 12px;
                                    padding-right: 4px;
                                }
                            }
                            .state_tit{
                                font-size: 16px;
                                color: #5C5A5A;
                                font-weight: 600;
                            }
                        }
                        .enter_forMoney{
                            margin-bottom: 10px;
                            height: 194px;
                            .sealImprint{
                                height: 194px;
                                position: relative;
                                .imgSuc{
                                    position: absolute;
                                    bottom: 0;
                                    right: 0;
                                    width: 82px;
                                }
                            }
                            .signUpSuc{
                                color: #999;
                                text-align: center;
                                line-height: 206px;
                                .bidnumRed{
                                    font-size: 20px;
                                    font-weight: bold;
                                }
                            }
                            .signSubmit{
                                .tipSign{
                                    margin-top: 20px;
                                    color: #686868;
                                    padding-left: 10px;
                                    font-size: 16px;
                                }
                                .ophoneSign{
                                    margin-top: 10px;
                                    color: #7e7a7a;
                                    padding-left: 10px;
                                    font-size: 14px;
                                }
                            }
                            .en_for_money{
                                
                                padding: 20px 10px;
                                .m_current{
                                    font-size: 12px;
                                    color: #686868;
                                }
                                .m_price{
                                    font-size:28px;
                                    margin: 0px 8px;
                                }
                                .m_rmb{
                                    position: relative;
                                    font-size: 12px;
                                }

                            }
                            .en_f_waiting{
                                text-align: center;
                                color: #606266;
                            }
                            .en_for_bm{
                                text-align: center;
                                margin-top: 18px;
                                .en_for_btn{
                                    width: 141px;
                                    height: 38px;
                                    line-height: 38px;
                                    color: #fff;
                                    margin: 0 auto;
                                    border-radius: 3px;
                                }
                                .abortiveAuction{
                                    color: #606266;
                                    font-size: 20px;
                                    line-height: 206px;
                                }
                            }
                            .en_f_add{
                                text-align: center;
                                .el-input-number{
                                    width: 250px;
                                }
                            }
                            .en_f_payBtn{
                                text-align: center; 
                                margin-top: 20px;
                                .el-button{
                                    width: 250px;
                                    font-size: 16px;
                                }
                                .el-button--danger{
                                    background-color: #d13a29;
                                    border-color: #d13a29;
                                }
                            }
                        }
                        .enter_ul{
                        
                            li{
                                height: 32px;
                                background-color: #fdf4f4;
                                font-size: 12px;
                                line-height: 32px;
                                color: #C21F3A;
                                padding-left: 8px;
                                margin-bottom: 8px;
                            }
                        }
                    }
                    .bidderNumber_box{
                        margin-top: 10px;
                        border-top: 1px solid #EBEEF5;
                        border-bottom: 1px solid #EBEEF5;
                        padding: 6px 0;
                        font-size: 12px;
                        color: #686868;
                        .bid_num_color{
                            color: #409EFF;
                        }
                    }
                    .form_con{
                        font-size: 12px;
                        .el-row{
                            .el-col{
                                padding-top: 10px;
                                span:first-child{
                                    color: #999;
                                }
                                span:last-child{
                                    color: #5C5A5A;
                                }
                            }
                        }
                    }
                }

        } 
    }
    .chat{
        width: 290px;
        background-color: #ccc;
        .de_table{
            height: 200px;
            .el-table{
                border: 1px solid #f3f3f3;
                // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
            }
        }
        .el-tabs--border-card{
            height: 323px;
            box-shadow: none;
            border:1px solid #f3f3f3;
            /deep/.el-tabs__content{
                padding: 0px !important;
            }
            /deep/.el-tabs__header{
                background-color: #f6f3f4;
            .el-tabs__item.is-active{
                color: #d13a29;
            }
            .el-tabs__item:not(.is-disabled):hover{
                color: #d13a29;
            }
            }
        }
        .infoChat{
            text-align: center;
            margin-top: 20px;
        }
        .mianscroll {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            height: 284px;
            overflow: auto;
            .emptyData{
                text-align: center;
                font-size: 14px;
                color: #909399;
            }
        }
        .msg_box {
            width: 100%;
            margin: 20px 10px 0px 0px;
            .c_header{
                display: flex;
                .c_header_tb{
                    font-size: 13px;
                }
                .c_header_tm{
                    font-size: 12px;
                }
            }
            .c_news{
                font-size: 12px;
                background-color: #F5F6F7;
                padding: 4px;
                border-radius: 4px;
                display: inline-block;
                width: 207px;
                text-align: left;
                white-space:pre-wrap;
            }


        }
        .header-avtor {
            width: 40px !important;
            height: 40px;
            border-radius: 50%;
            background: #ccc;
        }
    }
}
.module_list{
    .lotsIntroduce{
        margin-bottom: 80px;
    }
    .imageList_box{
       text-align: center;
       .el-image{
            margin-top: 16px;
       }
    }
    /deep/ .big_text img {
        max-width: 100%;
    }
    // .big_text{
    //     font-size: 14px;
    // }
    .el-tabs--border-card{
        min-height: 300px;
        /deep/.el-tabs__content{
            padding: 35px;
        }
        /deep/.el-tabs__header{
            background-color: #f6f3f4;
           .el-tabs__item.is-active{
            color: #d13a29;
           }
           .el-tabs__item:not(.is-disabled):hover{
            color: #d13a29;
           }
        }
    }
    
}
.d_foot_btn{
    /deep/.btn_f{
        color: #fff;
        background-color: #d13a29;
        border-color: #d13a29;
    }
    .btn_cf{
        color: #909399;
        background-color: #f4f4f5;
        border-color: #d3d4d6;
    }   
}
.dis_con_out{
    font-size: 14px;
    color: #606266;
    text-align: center;
    div{
        line-height: 60px;
    }
    .first_line{
        .pic_fl{
            color: #000000;
            font-weight: bold;
            font-size: 18px;
        }
    }
    .second_line{
    display: flex;
    align-items: center;
    justify-content: center;
    .bigWord{
        margin-left: 10px;
        line-height: 30px;
        padding: 0px 10px;
        background-color: #f4f4f5;
        color: #606266;
        font-weight: bold;
    }
        .money_sl{
            color: #d13a29;
            font-size: 26px;
        }
    }
}
.red{
    color: #d13a29;
}
.bgc_red{
    background: #FDF4F5;
}
.bgc_green{
    background: #F0FBF9;
}
.bgc_gray{
    background: #F5F5F5;
}
/deep/.table_firstRow{
    color: #cc0000 !important;
    font-weight: bold;
}
     .underlined {
      text-decoration: underline;
    }

    .textindent{
      text-indent: 2em;
      margin-bottom: 5px;
      color: #000000 !important;
    //   font-family: 'SourceHanSerifCN-Light', serif;
        font-family: 'MingLiU';
        font-size: 16px;
    }
</style>